<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<div class="container">
	<div id="line" style="width: 380px;height:400px; float: left;"></div>
	<div id="pie" style="width: 380px;height:400px; float: left;"></div>
	<div id="bar" style="width: 380px;height:400px; float: left;"></div>
</div>
<script type="text/javascript">
/**
 * 折线图
 */
 // 指定图表的配置项和数据
 var option = {
     title: {
         text : '某站点用户访问来源',
         subtext : '纯属虚构',
             x : 'center'
     },
     tooltip: {
         trigger : 'item',
         formatter : "{a} <br/>{b} : {c} ({d}%)"
     },
     legend : {
         left : 'left',
         data : ["访问来源"]
     },
     xAxis: {
         data: ["CPU","内存","JVM","线程","运行时间"]
     },
     yAxis: {},
     series: [{
         name: '访问来源',
         type: 'line',
         data : [ {
             value : 335,
             name : 'CPU'
         }, {
             value : 310,
             name : '内存'
         }, {
             value : 234,
             name : 'JVM'
         }, {
             value : 135,
             name : '线程'
         }, {
             value : 1548,
             name : '运行时间'
         } ]
     }]
 };
 var myLineChart = echarts.init(document.getElementById('line'));
 // 使用刚指定的配置项和数据显示图表。
 myLineChart.setOption(option);


 /**
  * 饼图
  */
var option = {
     title : {
         text : '某站点用户访问来源',
         subtext : '纯属虚构',
         x : 'center'
     },
     tooltip : {
         trigger : 'item',
         formatter : "{a} <br/>{b} : {c} ({d}%)"
     },
     legend : {
         orient : 'vertical',
         left : 'left',
         data : [ 'CPU', '内存', 'JVM', '线程', '运行时间' ]
     },
     series : [ {
         name : '访问来源',
         type : 'pie',
         radius : '55%',
         center : [ '50%', '60%' ],
         data : [ {
             value : 335,
             name : 'CPU'
         }, {
             value : 310,
             name : '内存'
         }, {
             value : 234,
             name : 'JVM'
         }, {
             value : 135,
             name : '线程'
         }, {
             value : 1548,
             name : '运行时间'
         } ],
         itemStyle : {
             emphasis : {
                 shadowBlur : 10,
                 shadowOffsetX : 0,
                 shadowColor : 'rgba(0, 0, 0, 0.5)'
             }
         }
     } ]
 };

 // 基于准备好的dom，初始化echarts实例
 var myPieChart = echarts.init(document.getElementById('pie'));
 // 使用刚指定的配置项和数据显示图表
 myPieChart.setOption(option);


 /**
  * 柱形图
  */
 // 指定图表的配置项和数据
 var option = {
     title: {
         text : '某站点用户访问来源',
         subtext : '纯属虚构',
         x : 'center'
     },
     tooltip: {
         trigger : 'item',
         formatter : "{a} <br/>{b} : {c} ({d}%)"
     },
     legend: {
         left : 'left',
         data:['访问来源']
     },
     xAxis: {
         data: ["CPU","内存","JVM","线程","运行时间"]
     },
     yAxis: {},
     series: [{
         name: '访问来源',
         type: 'bar',
         data: [5, 20, 36, 10, 10]
     }]
 };
//基于准备好的dom，初始化echarts实例
 var myBarChart = echarts.init(document.getElementById('bar'));
 myBarChart.setOption(option);
</script>